<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="keywords" content="科技有限公司" />
		<meta content="telephone=no" name="format-detection" />
		<meta name="description" content="剁手" />
		<meta name="author" content="剁手">
		<meta name="browsermode" content="application">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/iosSelect.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />

	</head>

	<body>

		<!--预加载-->
		<div class="preload_Shandow">
			<p class="preStar"><img src="img/preload_star.png" class="cover" /></p>
			<dl>
				<dt><img src="img/preload_earth.png" class="cover"/></dt>
				<dd>loading：<span class="num">0%</span></dd>
			</dl>
		</div>
		<!--点击番茄，烟花音效-->
		<!--<audio src="mp3/click.mp3" id="click_audio" preload="auto"></audio>-->
		<div class="allAcontainer ovw">
			<!--音乐-->
			<audio id="audio" src="mp3/music.mp3" autoplay="autoplay" loop="loop"></audio>
			<div class="music audio-rotate"><img src="img/music_open.png" alt=""></div>

			<!--第一页 首页-->
			<div class="page ovw pageOne">
				<!--logo-->
				<header class="logo"><img src="img/logo.png" /></header>
				<p class="oneStar animated fadeIn"><img src="img/one_star.png" /></p>
				<!--光束-->
				<!--<p class="light ovw animated fadeIn" style="animation-delay: 2.4s;"><img src="img/one_light.png" /></p>-->
				<div class="wrapper ovw">
					<div class="inner ovw">
						<p class="oneText animated bounceInDown"><img src="img/one_text.png" /></p>
						<!--地球-->
						<div class="earth ovw animated slideInUp" style="animation-duration: 2s;">
						</div>
						<!--流星坠落-->
						<ul class="ovw">
							<li class="one animated fadeInDown" style="animation-delay: 0.8s;"><img src="img/star_one.png" /></li>
							<li class="two animated fadeInDown" style="animation-delay: 1s;"><img src="img/star_two.png" /></li>
							<li class="three animated fadeInDown" style="animation-delay: 1.2s;"><img src="img/star_three.png" /></li>
							<li class="four animated fadeInDown" style="animation-delay: 1.4s;"><img src="img/star_four.png" /></li>
							<li class="five animated fadeInDown" style="animation-delay: 1.6s;"><img src="img/star_five.png" /></li>
							<li class="six animated fadeInDown" style="animation-delay: 1.8s;"><img src="img/star_six.png" /></li>
							<li class="seven animated fadeInDown" style="animation-delay: 2s;"><img src="img/star_seven.png" /></li>
						</ul>
						<!--点-->
						<p class="point animated fadeIn" style="animation-delay: 2.4s;"><img src="img/point.png" /></p>
						<!--不服来战-->
						<div class="btn animated tada infinite" style="animation-delay: 2.8s;">
							<a><img src="img/oneBtn.png" /></a>
						</div>
					</div>
				</div>
			</div>
			<!--第二页 选择年份-->
			<div class="page ovw pageTwo">
				<!--<p class="twoStar ovw"><img src="img/two_star.png"/></p>-->
				<p class="choose_Year animated fadeInDown"><img src="img/choose_Year.png" /></p>
				<a class="btn choose_Country animated fadeInDown" style="animation-delay: 0.2s;"><img src="img/choose_Country.png" /></a>
				<div class="dateYear ovw animated fadeInDown" style="animation-delay: 0.3s;">
					<input type="hidden" name="bank_id" id="bankId" value="">
					<p id="showText" class="showText">2018</p>
				</div>
				<div class="wrap"></div>
				<p class="star"><img src="img/star.png" /></p>
			</div>
			<!--第三页 国家选择-->
			<div class="page ovw pageThree">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<!-------------亚洲----------------->
						<section class="swiper-slide swiper-slide1 nano" placeIndex='0'>
							<img class="mapStar ani resize fadeInOut animated" src="img/threeStar.png" alt="">
							<img class="mapTittle ani resize fadeInDown animated" swiper-animate-effect="fadeInDown" src="img/threeAsiaTittle.png" alt="">
							<img class="mapImg" src="img/three_earthBg.png" alt="">
							<!--小地图-->
							<img class="smallMap ovw threeAsia" src="img/threeAsiaBg.png" />
							<img class="mapBorder" src="img/threeBorder.png" alt="">
							<div>
								<img jumpIndex='0' class="mapNext ani resize fadeInDown animated" swiper-animate-effect="fadeInDown" src="img/threeNext.png" alt="">
								<ul class="list">
									<li listIndex="0">中国</li>
									<li listIndex="1">蒙古</li>
									<li listIndex="2">朝鲜</li>
									<li listIndex="3">韩国</li>
									<li listIndex="4">日本</li>
									<li listIndex="5">菲律宾</li>
									<li listIndex="6">越南</li>
									<li listIndex="7">老挝</li>
									<li listIndex="8">柬埔寨</li>
									<li listIndex="9">缅甸</li>
									<li listIndex="10">泰国</li>
									<li listIndex="11">马来西亚</li>
									<li listIndex="12">文莱</li>
									<li listIndex="13">新加坡</li>
									<li listIndex="14">印度尼西亚</li>
									<li listIndex="15">尼泊尔</li>
									<li listIndex="16">不丹</li>
									<li listIndex="17">印度</li>
									<li listIndex="18">巴基斯坦</li>
									<li listIndex="19">斯里兰卡</li>
									<li listIndex="20">马尔代夫</li>
									<li listIndex="21">哈萨克斯坦</li>
									<li listIndex="22">吉尔吉斯斯坦</li>
									<li listIndex="23">塔吉克斯坦</li>
									<li listIndex="24">乌兹别克斯坦</li>
									<li listIndex="25">伊朗</li>
									<li listIndex="26">叙利亚</li>
									<li listIndex="27">约旦</li>
									<li listIndex="28">黎巴嫩</li>
									<li listIndex="29">以色列</li>
									<li listIndex="30">土耳其</li>
									<li listIndex="31">其它</li>
								</ul>
						</section>
						<!---------------欧洲-------------->
						<section class="swiper-slide swiper-slide2" placeIndex='1'>
							<img class="mapStar" src="img/threeStar.png" alt="">
							<img class="mapTittle ani resize fadeInDown animated" src="img/threeEuropeTittle.png" swiper-animate-effect="fadeInDown" alt="">
							<img class="mapImg" src="img/three_earthBg.png" alt="">
							<!--小地图-->
							<img class="smallMap ovw threeEurope" src="img/threeEuropeBg.png" />
							<img class="mapBorder" src="img/threeBorder.png" alt="">
							<img jumpIndex='1' class="mapNext ani resize fadeInDown animated" swiper-animate-effect="fadeInDown" src="img/threeNext.png" alt="">
							<ul class="list">
								<li listIndex="32">芬兰</li>
								<li listIndex="33">瑞典</li>
								<li listIndex="34">挪威</li>
								<li listIndex="35">冰岛</li>
								<li listIndex="36">丹麦</li>
								<li listIndex="37">俄罗斯</li>
								<li listIndex="38">乌克兰</li>
								<li listIndex="39">波兰</li>
								<li listIndex="40">捷克斯洛伐克</li>
								<li listIndex="41">匈牙利</li>
								<li listIndex="42">德国</li>
								<li listIndex="43">奥地利</li>
								<li listIndex="44">瑞士</li>
								<li listIndex="45">英国</li>
								<li listIndex="46">爱尔兰</li>
								<li listIndex="47">荷兰</li>
								<li listIndex="48">比利时</li>
								<li listIndex="49">卢森堡</li>
								<li listIndex="50">法国</li>
								<li listIndex="51">摩纳哥</li>
								<li listIndex="52">罗马尼亚</li>
								<li listIndex="53">保加利亚</li>
								<li listIndex="54">塞尔维亚</li>
								<li listIndex="55">塔吉克斯坦</li>
								<li listIndex="56">阿尔巴尼亚</li>
								<li listIndex="57">希腊</li>
								<li listIndex="58">斯洛文尼亚</li>
								<li listIndex="59">克罗地亚</li>
								<li listIndex="60">意大利</li>
								<li listIndex="61">西班牙</li>
								<li listIndex="62">葡萄牙</li>
								<li listIndex="63">其它</li>
							</ul>
						</section>
						<!----------------北美洲-------------->
						<section class="swiper-slide swiper-slide3" placeIndex='2'>
							<img class="mapStar" src="img/threeStar.png" alt="">
							<img class="mapTittle ani resize fadeInDown animated" src="img/threeNortTittle.png" swiper-animate-effect="fadeInDown" alt="">
							<img class="mapImg" src="img/three_earthBg.png" alt="">
							<!--小地图-->
							<img class="smallMap ovw threeMoose" src="img/threeMooseBg.png" />
							<img class="mapBorder" src="img/threeBorder.png" alt="">
							<img jumpIndex='2' class="mapNext ani resize fadeInDown animated" swiper-animate-effect="fadeInDown" src="img/threeNext.png" alt="">
							<ul class="list">
								<li listIndex="64">加拿大</li>
								<li listIndex="65">美国蒙</li>
								<li listIndex="66">墨西哥</li>
								<li listIndex="67">格陵兰</li>
								<li listIndex="68">危地马拉</li>
								<li listIndex="69">伯利兹</li>
								<li listIndex="70">萨尔瓦多</li>
								<li listIndex="71">洪都拉斯</li>
								<li listIndex="72">尼加拉瓜</li>
								<li listIndex="73">哥斯达黎加</li>
								<li listIndex="74">巴拿马</li>
								<li listIndex="75">巴哈马</li>
								<li listIndex="76">牙买加</li>
								<li listIndex="77">海地</li>
								<li listIndex="78">特立尼达和多巴哥</li>
								<li listIndex="79">波多黎各</li>
								<li listIndex="80">安圭拉</li>
								<li listIndex="81">蒙特塞拉特</li>
								<li listIndex="82">其它</li>
							</ul>
						</section>
						<!-------------南美洲----------------->
						<section class="swiper-slide swiper-slide4" placeIndex='3'>
							<img class="mapStar" src="img/threeStar.png" alt="">
							<img class="mapTittle ani resize fadeInDown animated" src="img/threeSouthTittle.png" swiper-animate-effect="fadeInDown" alt="">
							<img class="mapImg" src="img/three_earthBg.png" alt="">
							<!--小地图-->
							<img class="smallMap ovw threeSouth" src="img/threeSouthBg.png" />
							<img class="mapBorder" src="img/threeBorder.png" alt="">
							<img jumpIndex='3' class="mapNext ani resize fadeInDown animated" swiper-animate-effect="fadeInDown" src="img/threeNext.png" alt="">
							<ul class="list">
								<li listIndex="83">哥伦比亚</li>
								<li listIndex="84">委内瑞拉</li>
								<li listIndex="85">苏里南</li>
								<li listIndex="86">厄瓜多尔</li>
								<li listIndex="87">秘鲁</li>
								<li listIndex="88">玻利维亚</li>
								<li listIndex="89">巴西</li>
								<li listIndex="90">智利</li>
								<li listIndex="91">阿根廷</li>
								<li listIndex="92">乌拉圭</li>
								<li listIndex="93">巴拉圭</li>
								<li listIndex="94">其它</li>
							</ul>
						</section>
						<!-------------大洋洲----------------->
						<section class="swiper-slide swiper-slide5" placeIndex='4'>
							<img class="mapStar" src="img/threeStar.png" alt="">
							<img class="mapTittle ani resize fadeInDown animated" src="img/threeOceaniaTittle.png" swiper-animate-effect="fadeInDown" alt="">
							<img class="mapImg" src="img/three_earthBg.png" alt="">
							<!--小地图-->
							<img class="smallMap ovw threeOceania" src="img/threeOceaniaBg.png" />
							<img class="mapBorder" src="img/threeBorder.png" alt="">
							<img jumpIndex='4' class="mapNext ani resize fadeInDown animated" swiper-animate-effect="fadeInDown" src="img/threeNext.png" alt="">
							<ul class="list">
								<li listIndex="95">澳大利亚</li>
								<li listIndex="96">新西兰</li>
								<li listIndex="97">帕劳</li>
								<li listIndex="98">关岛</li>
								<li listIndex="99">巴布亚新几内亚</li>
								<li listIndex="100">所罗门群岛</li>
								<li listIndex="101">瓦努阿图</li>
								<li listIndex="102">斐济群岛</li>
								<li listIndex="103">图瓦卢</li>
								<li listIndex="104">萨摩亚</li>
								<li listIndex="105">汤加</li>
								<li listIndex="106">其它</li>
							</ul>
						</section>
						<!---------------非洲-------------->
						<section class="swiper-slide swiper-slide6" placeIndex='5'>
							<img class="mapStar" src="img/threeStar.png" alt="">
							<img class="mapTittle ani resize fadeInDown animated" src="img/threeAfricaTittle.png" swiper-animate-effect="fadeInDown" alt="">

							<img class="mapImg" src="img/three_earthBg.png" alt="">
							<!--小地图-->
							<img class="smallMap ovw threeAfrica " src="img/threeAfricaBg.png" />
							<img class="mapBorder" src="img/threeBorder.png" alt="">
							<img jumpIndex='5' class="mapNext ani resize fadeInDown animated" swiper-animate-effect="fadeInDown" src="img/threeNext.png" alt="">
							<ul class="list">
								<li listIndex="107">埃及</li>
								<li listIndex="108">利比亚</li>
								<li listIndex="109">突尼斯</li>
								<li listIndex="110">摩洛哥</li>
								<li listIndex="111">苏丹</li>
								<li listIndex="112">埃塞俄比亚</li>
								<li listIndex="113">肯尼亚</li>
								<li listIndex="114">坦桑尼亚</li>
								<li listIndex="115">塞内加尔</li>
								<li listIndex="116">冈比亚</li>
								<li listIndex="117">几内亚</li>
								<li listIndex="118">塞拉利昂</li>
								<li listIndex="119">利比里亚</li>
								<li listIndex="120">加纳</li>
								<li listIndex="121">尼日利亚</li>
								<li listIndex="122">赞比亚</li>
								<li listIndex="123">安哥拉</li>
								<li listIndex="124">马达加斯加</li>
								<li listIndex="125">毛里求斯</li>
								<li listIndex="126">其它</li>
							</ul>
						</section>
						<!----------------南极洲-------------->
						<section class="swiper-slide swiper-slide7" placeIndex='6'>
							<img class="mapStar" src="img/threeStar.png" alt="">
							<img class="mapTittle ani resize fadeInDown animated" src="img/threeAntarcticaTittle.png" swiper-animate-effect="fadeInDown" alt="">
							<img class="mapImg" src="img/threeAntarcticaBg.png" alt="">
							<div class="fiveBtn ovw">
								<img class="mapBtn ani resize fadeInUp animated" swiper-animate-effect="fadeInUp" src="img/threeBtn.png">
							</div>
						</section>

						</div>

					</div>
					<!--右侧快捷导航-->
					<!--<nav>
						<div class="country" index='0'>
							<div class="selected" ; style="display:inline-block;font-size:12px;">亚洲</div> <img class="mapSelect" src="img/threeSelected.png" alt=""></div>
						<img class="line" src="img/threeLine.png" alt="">
						<div class="country" index='1'>
							<div style="display:inline-block;font-size:12px;">欧洲</div> <img class="mapSelect" src="img/threeSelecte.png" alt=""></div>
						<img class="line" src="img/threeLine.png" alt="">
						<div class="country" index='2'>
							<div style="display:inline-block;font-size:12px;">北美洲</div> <img class="mapSelect" src="img/threeSelecte.png" alt=""></div>
						<img class="line" src="img/threeLine.png" alt="">
						<div class="country" index='3'>
							<div style="display:inline-block;font-size:12px;">南美洲</div> <img class="mapSelect" src="img/threeSelecte.png" alt=""></div>
						<img class="line" src="img/threeLine.png" alt="">
						<div class="country" index='4'>
							<div style="display:inline-block;font-size:12px;">大洋洲</div> <img class="mapSelect" src="img/threeSelecte.png" alt=""></div>
						<img class="line" src="img/threeLine.png" alt="">
						<div class="country" index='5'>
							<div style="display:inline-block;font-size:12px;">非洲</div> <img class="mapSelect" src="img/threeSelecte.png" alt=""></div>
						<img class="line" src="img/threeLine.png" alt="">
						<div class="country" index='6'>
							<div style="display:inline-block;font-size:12px;">南极洲</div> <img class="mapSelect" src="img/threeSelecte.png" alt=""></div>
					</nav>-->

					<nav>

						<ul class="ovw">
							<li class="ovw country active" index='0'>
								<dl>
									<dt>亚洲</dt>
									<dd></dd>
								</dl>
								<p class="line"></p>
							</li>
							<li class="ovw country" index='1'>
								<dl>
									<dt>欧洲</dt>
									<dd></dd>
								</dl>
								<p class="line"></p>
							</li>
							<li class="ovw country" index='2'>
								<dl>
									<dt>北美洲</dt>
									<dd></dd>
								</dl>
								<p class="line"></p>

							</li>
							<li class="ovw country" index='3'>
								<dl>
									<dt>南美洲</dt>
									<dd></dd>
								</dl>
								<p class="line"></p>

							</li>
							<li class="ovw country" index='4'>
								<dl>
									<dt>大洋洲</dt>
									<dd></dd>
								</dl>
								<p class="line"></p>

							</li>
							<li class="ovw country" index='5'>
								<dl>
									<dt>非洲</dt>
									<dd></dd>
								</dl>
								<p class="line"></p>

							</li>
							<li class="ovw country" index='6'>
								<dl>
									<dt>南极洲</dt>
									<dd></dd>
								</dl>
							</li>
						</ul>
					</nav>
				</div>
				<!--第四页 输入姓名-->
				<div class="page ovw pageFour">
					<div class="wrapper ovw">

						<div class="inner ovw">
							<p class="report_Text animated fadeInDown"><img src="img/report_text.png" /></p>

							<p class="report_Name animated zoomIn" style="animation-delay: 0.2s;"><img src="img/report_name.png" /></p>
							<form class="ovw animated zoomIn" style="animation-delay: 0.4s;">
								<input type="text" name="" id="" value="" placeholder="输入姓名" />
							</form>
							<a class="btn look_Report animated fadeInUp" style="animation-delay: 0.6s;"><img src="img/look_report.png" /></a>
						</div>
					</div>

				</div>
				<!--第五页-->
				<div class="page ovw pageFive">

					<!--星星-->
					<p class="fiveStar ovw animated fadeInDown"><img src="img/fiveStar.png" /></p>
					<div class="detailText ovw animated fadeInDown">
						<p class="ovw first">
							<b class="content ovw">
								<span class="name">刘德华刘</span><i>剁遍了</i>
								<span class="size">2</span><i>大洲</i>
								<span class="country">18</span><i>个国家／地区</i>
						   </b>
						</p>
						<p class="ovw">
							<b class="content ovw">
								<i>剁手榜排名超过</i>
								<span class="percent">20%</span><i>买家</i>
							</b>
						</p>
						<p class="ovw">
							<b class="content ovw">
								<i>剁龄</i>
								<span class="year">15</span><i>年</i>
							</b>
						</p>
					</div>
					<div class="totalMap ovw animated fadeInUp" style="animation-duration: 1.5s;">
						<div class="totalEarth ovw">
							<div class="earthInner ovw">
								<div class="pointList ovw">
									<!--亚洲-->
									<span country='中国'></span>
									<span country='蒙古'></span>
									<span country='朝鲜'></span>
									<span country='韩国'></span>
									<span country='日本'></span>
									<span country='菲律宾'></span>
									<span country='越南'></span>
									<span country='老挝'></span>
									<span country='柬埔寨'></span>
									<span country='缅甸'></span>
									<span country='泰国'></span>
									<span country='马来西亚'></span>
									<span country='文莱'></span>
									<span country='新加坡'></span>
									<span country='印度尼西亚'></span>
									<span country='尼泊尔'></span>
									<span country='不丹'></span>
									<span country='印度'></span>
									<span country='巴基斯坦'></span>
									<span country='斯里兰卡'></span>
									<span country='马尔代夫'></span>
									<span country='哈萨克斯坦'></span>
									<span country='吉尔吉斯斯坦'></span>
									<span country='塔吉克斯坦'></span>
									<span country='乌兹别克斯坦'></span>
									<span country='伊朗'></span>
									<span country='叙利亚'></span>
									<span country='约旦'></span>
									<span country='黎巴嫩'></span>
									<span country='以色列'></span>
									<span country='土耳其'></span>

									<!--欧洲-->
									<span country='芬兰'></span>
									<span country='瑞典'></span>
									<span country='挪威'></span>
									<span country='冰岛'></span>
									<span country='丹麦'></span>
									<span country='俄罗斯'></span>
									<span country='乌克兰'></span>
									<span country='波兰'></span>
									<span country='捷克'></span>
									<span country='斯洛伐克'></span>
									<span country='匈牙利'></span>
									<span country='德国'></span>
									<span country='奥地利'></span>
									<span country='瑞士'></span>
									<span country='英国'></span>
									<span country='爱尔兰'></span>
									<span country='荷兰'></span>
									<span country='比利时'></span>
									<span country='卢森堡'></span>
									<span country='法国'></span>
									<span country='摩纳哥'></span>
									<span country='罗马尼亚'></span>
									<span country='保加利亚'></span>
									<span country='塞尔维亚'></span>
									<span country='阿尔巴尼亚'></span>
									<span country='希腊'></span>
									<span country='斯洛文尼亚'></span>
									<span country='克罗地亚'></span>
									<span country='意大利'></span>
									<span country='西班牙'></span>
									<span country='葡萄牙'></span>

									<!--北美洲-->
									<span country='加拿大'></span>
									<span country='美国'></span>
									<span country='墨西哥'></span>
									<span country='格陵兰'></span>
									<span country='危地马拉'></span>
									<span country='伯利兹'></span>
									<span country='萨尔瓦多'></span>
									<span country='洪都拉斯'></span>
									<span country='尼加拉瓜'></span>
									<span country='哥斯达黎加'></span>
									<span country='巴拿马'></span>
									<span country='巴哈马'></span>
									<span country='古巴'></span>
									<span country='牙买加'></span>
									<span country='海地'></span>
									<span country='特立尼达和多巴哥'></span>
									<span country='波多黎各'></span>
									<span country='安圭拉'></span>
									<span country='蒙特塞拉特'></span>

									<!--南美洲-->
									<span country='哥伦比亚'></span>
									<span country='委内瑞拉'></span>
									<span country='苏里南'></span>
									<span country='厄瓜多尔'></span>
									<span country='秘鲁'></span>
									<span country='玻利维亚'></span>
									<span country='巴西'></span>
									<span country='智利'></span>
									<span country='阿根廷'></span>
									<span country='乌拉圭'></span>
									<span country='巴拉圭'></span>

									<!--大洋洲-->
									<span country='澳大利亚'></span>
									<span country='新西兰'></span>
									<span country='帕劳'></span>
									<span country='关岛'></span>
									<span country='巴布亚新几内亚'></span>
									<span country='所罗门群岛'></span>
									<span country='瓦努阿图'></span>
									<span country='斐济群岛'></span>
									<span country='图瓦卢'></span>
									<span country='萨摩亚'></span>
									<span country='汤加'></span>
									<!--非洲-->
									<span country='埃及'></span>
									<span country='利比亚'></span>
									<span country='突尼斯'></span>
									<span country='摩洛哥'></span>
									<span country='苏丹'></span>
									<span country='埃塞俄比亚'></span>
									<span country='肯尼亚'></span>
									<span country='坦桑尼亚'></span>
									<span country='塞内加尔'></span>
									<span country='冈比亚'></span>
									<span country='几内亚'></span>
									<span country='塞拉利昂'></span>
									<span country='利比里亚'></span>
									<span country='加纳'></span>
									<span country='尼日利亚'></span>
									<span country='赞比亚'></span>
									<span country='安哥拉'></span>
									<span country='马达加斯加'></span>
									<span country='毛里求斯'></span>

								</div>
							</div>

						</div>
						<!--一站剁齐-->
						<div class="btnList ovw">
							<div class="inner ovw">
								<p class="text"><img src="img/five_text.png" /></p>
								<p class="btnClick ovw">
									<a class="duo animated pulse infinite" href="http://www.yicai.com/topic/100045374"><img src="img/five_duo.png" /></a>
									<a class="save animated pulse infinite"><img src="img/five_save.png" /></a>
								</p>
								<!--分享-->
								<dl class="share ovw">
									<dt><img src="img/five_code.png"/></dt>
									<dd><img src="img/five_touch.png" /></dd>
								</dl>
							</div>
							<p class="bottomLogo"><img src="img/five_logo.png" /></p>
						</div>
					</div>
					<!--保存遮罩-->
					<img class="saveShandow ovw" src="img/saveopacity.png"></img>
					<div class="savebtn ovw">
						<a href="http://www.yicai.com/topic/100045374"></a>
					</div>
					<div class="hidden"></div>
				</div>

			</div>
			<!--pc弹框-->
			<div class="pc_Shandow ovw">
				<dl class="ovw">
					<dt><img src="img/pc_code.png"/></dt>
					<dd>剁不动，那就换个姿势试一试<br/>请扫描二维码查看您的剁手指数
					</dd>
				</dl>
			</div>
			<script type="text/javascript" src="js/jquery.1.9.1.js"></script>
			<script type="text/javascript" src="js/flexable1.0.0.js"></script>
			<!--<script type="text/javascript" src="js/rem.js"></script>-->
			<script type="text/javascript" src="js/fastClick.js"></script>
			<script type="text/javascript" src="js/iosSelect.js"></script>
			<script type="text/javascript" src="js/swiper.min.js"></script>

			<script type="text/javascript" src="js/swiper.animate.min.js"></script>
			<script type="text/javascript" src="js/yDate.js"></script>
			<script type="text/javascript" src="js/resLoader.js"></script>
			<!--微信端 苹果返回刷新-->
			<script type="text/javascript">
				var wxback = {
					init: function() {
						var ua = navigator.userAgent;
						if(ua.indexOf('iPhone') > -1) {
							//this.pushHistory();
							/* window.addEventListener("popstate", function(e) { //回调函数中实现需要的功能
							  //window.location.href = document.referrer+"&"+Math.floor(Math.random()*1000);
							  //history.go(-1);//不管怎么样都是返回到最初的页面返回了n次
							  //history.back();//不管怎么样都是返回到最初的页面返回了n次
							  //window.location = document.referrer;//上一个页面url
							  //WeixinJSBridge.call('closeWindow');//直接关闭页面
							}, false);*/
							var isPageHide = false;
							window.addEventListener('pageshow', function() {
								if(isPageHide) {
									//									window.location = document.referrer;
									window.location.reload();
								}
							});
							window.addEventListener('pagehide', function() {
								isPageHide = true;
							});
						}
					},
					pushHistory: function() {
						var state = {
							title: document.title,
							url: location.href
						}
						window.history.pushState(state, state.title, state.url);
						console.log(window.history);
					}
				}
				wxback.init();
			</script>
			<!--判断访问类型是电脑还是手机-->
			<script type="text/javascript">
				$(function() {
					$('.pc_Shandow').css('height', $(window).height())
					$('.pc_Shandow p').css('lineHeight', $(window).height() + 'px')
					var mobile_flag = isMobile(); // true为PC端，false为手机端

					if(mobile_flag) {
						//						$('.pc_Shandow').hide()
					} else {
						$('.allAcontainer').css('display', 'none');
						$('.preload_Shandow').addClass('hide');
						$('.pc_Shandow').show();
						//						alert('请用移动端打开')
					}
				});

				function isMobile() {
					var userAgentInfo = navigator.userAgent;

					var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];

					var mobile_flag = false;

					//根据userAgent判断是否是手机
					for(var v = 0; v < mobileAgents.length; v++) {
						if(userAgentInfo.indexOf(mobileAgents[v]) > 0) {
							mobile_flag = true;
							break;
						}
					}
					var screen_width = window.screen.width;
					var screen_height = window.screen.height;

					//根据屏幕分辨率判断是否是手机
					if(screen_width < 500 && screen_height < 800) {
						mobile_flag = true;
					}

					return mobile_flag;
				}
			</script>
			<script type="text/javascript">
				$(function() {
					FastClick.attach(document.body);
				});
			</script>
			<script>
				function loaderStart() {
					var loader = new resLoader({
						resources: [
							//第一页
							'img/logo.png',
							'img/music_close.png',
							'img/music_open.png',
							'img/one_star.png',
							'img/one_text.png',
							'img/star_one.png',
							'img/star_two.png',
							'img/star_three.png',
							'img/star_four.png',
							'img/star_five.png',
							'img/star_six.png',
							'img/star_seven.png',
							'img/point.png',
							'img/earth.png',
							'img/oneBtn.png',
							//							'img/one_light.png',

							//第二页
							'img/reportBg.png',
							'img/choose_Year.png',
							'img/star.png',
							'img/choose_Country.png',
							//第三页
							'img/threeAfricaBg.png',
							'img/threeAfricaTittle.png',
							'img/threeAntarcticaBg.png',
							'img/threeAntarcticaTittle.png',
							'img/threeAsiaBg.png',
							'img/three_earthBg.png',

							'img/threeAsiaTittle.png',
							'img/threeBorder.png',
							'img/threeBtn.png',
							'img/threeEuropeBg.png',
							'img/threeEuropeTittle.png',

							'img/threeLine.png',
							'img/threeMooseBg.png',
							'img/threeNext.png',
							'img/threeNortTittle.png',
							'img/threeOceaniaBg.png',

							'img/threeOceaniaTittle.png',
							'img/threeSelecte.png',
							'img/threeSelected.png',
							'img/threeSouthBg.png',
							'img/threeSouthTittle.png',
							'img/threeStar.png',
							//第四页
							'img/report_text.png',
							'img/look_report.png',
							'img/report_name.png',

							//第五页
							'img/fiveStar.png',
							'img/five_total_earth.png',
							'img/five_total_map.png',
							'img/five_boxBg.png',
							'img/five_text.png',
							'img/five_code.png',
							'img/five_touch.png',
							'img/five_logo.png',
							'img/five_point.png',
							'img/five_duo.png',
							'img/five_save.png',

							'mp3/music.mp3',
							'mp3/click.mp3',
							'css/demo.css'

						],
						onStart: function(total) {

						},
						onProgress: function(current, total) {
							//							加载百分比
							var percent = parseInt(current / total * 100);
							$('.preload_Shandow dd span.num').text(percent + '%');

						},
						onComplete: function(total) {
							$('.preload_Shandow').delay(1000).fadeOut();
							$('.allAcontainer ').show();
							$('.allAcontainer .page.pageOne').addClass('active');

							function audioAutoPlay() {
								var audio = document.getElementById('audio');
								audio.play();
								document.addEventListener("WeixinJSBridgeReady", function() {
									audio.play();
								}, false);
							}
							audioAutoPlay();
							swiperLoad();

						}
					});

					loader.start();

				}

				var t_img; // 定时器
				var isLoad = true; // 控制变量

				// 判断图片加载状况，加载完成后回调
				isImgLoad(function() {
					// 加载完成
					loaderStart();
				});

				// 判断图片加载的函数
				function isImgLoad(callback) {
					// 注意我的图片类名都是cover，因为我只需要处理cover。其它图片可以不管。
					// 查找所有封面图，迭代处理
					$('.cover').each(function() {
						// 找到为0就将isLoad设为false，并退出each
						if(this.height === 0) {
							isLoad = false;
							return false;
						}
					});
					// 为true，没有发现为0的。加载完毕
					if(isLoad) {
						clearTimeout(t_img); // 清除定时器
						// 回调函数
						callback();
						// 为false，因为找到了没有加载完成的图，将调用定时器递归
					} else {
						isLoad = true;
						t_img = setTimeout(function() {
							isImgLoad(callback); // 递归扫描
						}, 500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
					}
				}
				//      window.attachEvent("onload",loaderStart);
			</script>
			<!--第二页 选择年份-->
			<script type="text/javascript">
				var showBankDom = document.querySelector('#showText'); // 绑定一个触发元素
				var bankIdDom = document.querySelector('#bankId'); // 绑定一个存储结果的元素
				showBankDom.addEventListener('click', function() { // 添加监听事件
					var bankId = showBankDom.dataset['id']; // 获取元素的data-id属性值
					var bankName = showBankDom.dataset['value']; // 获取元素的data-value属性值

					var bankSelect = new IosSelect(1, [data], { // 第一个参数为级联层级，演示为1
						container: '.wrap', // 容器class
						title: '年份选择', // 标题
						itemHeight: 36, // 每个元素的高度
						itemShowCount: 5, // 每一列显示元素个数，超出将隐藏
						oneLevelId: bankId, // 第一级默认值
						//					showAnimate: true, //是否显示动画
						callback: function(selectOneObj) { // 用户确认选择后的回调函数
							bankIdDom.value = selectOneObj.id;
							showBankDom.innerHTML = selectOneObj.value;
							showBankDom.dataset['id'] = selectOneObj.id;
							showBankDom.dataset['value'] = selectOneObj.value;
						}
					});
				});
			</script>
			<!--第三页 国家选择-->
			<script type="text/javascript">
				//				$(function() {
				function swiperLoad() {

					scaleW = window.innerWidth / 320;
					scaleH = window.innerHeight / 480;
					var resizes = document.querySelectorAll('.resize');
					for(var j = 0; j < resizes.length; j++) {
						resizes[j].style.width = parseInt(resizes[j].style.width) * scaleW + 'px';
						resizes[j].style.height = parseInt(resizes[j].style.height) * scaleH + 'px';
						resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH + 'px';
						resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + 'px';
					}
					var mySwiper = new Swiper('.swiper-container', {
						direction: 'vertical',
						noSwiping: true,
						noSwipingClass: 'list',
						autoplayDisableOnInteraction: false,
						//						nested: ture,
						//						freeMode:ture, 
						onInit: function(swiper) {
							swiperAnimateCache(swiper);
							swiperAnimate(swiper);
						},

						onSlideChangeEnd: function(swiper) {
							swiperAnimate(swiper);
							var activeIndex = swiper.activeIndex;
							$('.pageThree nav ul li').removeClass('active');
							$('.pageThree nav ul li').eq(activeIndex).addClass('active');

							//							$('.pageThree nav div.country div').removeClass('selected');
							//							$('.pageThree nav div.country').eq(activeIndex).find('div').addClass('selected');
							//							$('.pageThree nav div.country').find('img').attr("src", "img/threeSelecte.png");
							//							$('.pageThree nav div.country').eq(activeIndex).find('img').attr("src", "img/threeSelected.png")
						},
						onTransitionEnd: function(swiper) {
							swiperAnimate(swiper);
						},

					});
					//					下一站 点击
					$('.allAcontainer .pageThree  img.mapNext').click(function() {
						var jumpIndex = Number($(this).attr('jumpIndex')) + 1;
						mySwiper.slideTo(jumpIndex, 1200, true);
					})
					//				右侧快捷导航
					//					var indexNum = 0;
					$('.pageThree nav ul li').click(function() {
						$(this).addClass('active').siblings().removeClass('active');
						var $index = $(this).attr('index');
						mySwiper.slideTo($index, 1200, true);
					});
					//					alert($(window).height())
					//					$('.pageThree nav>div').click(function() {
					//						var $index = $(this).attr('index');
					//						if(indexNum != $index) {
					//							$(this).children("div").addClass('selected')
					//							$('.pageThree nav>div').find("div").eq(indexNum).removeClass('selected');
					//							$('.pageThree nav>div').find("div").eq(indexNum).next("img").attr("src", "img/threeSelecte.png")
					//							console.log($('.pageThree nav>div'))
					//							indexNum = $index;
					//							$('.pageThree nav>div').find("div").eq(indexNum).next("img").attr("src", "img/threeSelected.png")
					//							console.log(indexNum)
					//						}
					//						mySwiper.slideTo($index, 1200, true); //切换到第一个slide，速度为1秒  设置为false时不会触发onSlideChange回调函数。
					//					});
					//				地图列表选择
					//					var click_audio = document.getElementById('click_audio');

					function showSound(audioSrc) {
						/**因为音效元素是追加的，所以每次生成之前，将原来的删除掉*/
						$("#hint").remove();
						/**创建audio标签的Jquery对象，然后追加到body进行播放即可*/
						let audioJQ = $("<audio src='" + audioSrc + "' autoplay id='click_audio'/>");
						audioJQ.appendTo("body");
					}

					$('.pageThree ul.list li').click(function() {

						var $liIndex = $(this).index();

						$(this).toggleClass("mapSelected");
						$(this).parent().prev().find('.pointList span').eq($liIndex).addClass('active');
						var $listIndex = $(this).attr('listIndex');
						//世界地图显示
						if($(this).hasClass("mapSelected")) {
							showSound("mp3/click.mp3");

							$('.totalMap .pointList span').eq($listIndex).addClass('active');
						} else {

							$('.totalMap .pointList span').eq($listIndex).removeClass('active');
						}
						//$('.pageFive .placeList li').eq($placeIndex).addClass('active');

					});

					//				})
				}
			</script>
			<!--第四页 输入姓名-->
			<script type="text/javascript">
				$(function() {

					//				第一页  不服来战 点击
					$('.pageOne div.btn').click(function() {
						$(this).find('a').css('transform', 'translate(1px, 1px)');
						$('.pageOne').addClass('remove');
						$('.pageTwo').addClass('active');
						$('.pageTwo p.star').addClass('animated fadeInDown');
						//					$('.pageTwo .dateYear').addClass('animated fadeInDown')
					});
					//				第二页   点击
					$('.pageTwo a.choose_Country ').click(function() {
						$(this).css('transform', 'translate(1px, 1px)');
						$('.pageTwo').addClass('remove');
						$('.pageThree').addClass('active');
						$('.pageThree nav').show();
					});

					//				第三页 选择完毕点击
					$('.pageThree img.mapBtn').click(function() {
						$(this).css('transform', 'translate(1px, 1px)');
						$('.pageThree').addClass('remove');
						//					$('.pageThree').addClass('active');
						$('.pageFour').addClass('active');
					});
					//				第四页 查看报告 点击
					$('.pageFour a.btn ').click(function() {
						$(this).css('transform', 'translate(1px, 1px)');
						$('.pageFour').addClass('remove');
						//					$('.pageThree').addClass('active');
						$('.pageFive').addClass('active');
						var value = $('.allAcontainer .pageFour .wrapper .inner form input').val();
						localStorage.setItem('value', value)
					});

				})
			</script>
			<!--判断屏幕高度 首页添加不同样式名称-->
			<script type="text/javascript">
				$(function() {
					var winH = $(window).height();
					//									alert($(window).width())
					//									alert($(window).height())
					//					alert($(window).width())
					var fiveMap = $('.pageFive .totalMap').height();
					//alert(fiveMap)
					var fiveText = $('.pageFive.small div.detailText').height();
					var fiveTextOut = $('.pageFive div.detailText').outerHeight(true);
					var charH = winH - fiveMap - fiveText - 40;
					//					金博零距离按钮位置
					var fiveMap_top = parseInt($('.pageFive .totalMap').css('top'));
					var botLoog = $('.pageFive  p.bottomLogo').outerHeight(true);
					//					var saveBtn = fiveMap + fiveTextOut - $('.hidden').height();
					var btnHeight = $('.pageFive .savebtn a').height(); //按钮自身高度
					var btnInner = $('.pageFive .btnList .inner').height();
					var btnInner_text = $('.pageFive .btnList .inner p.text').outerHeight(true);
					var btnInner_click = $('.pageFive .btnList .inner p.btnClick ').outerHeight(true);
					var btninner_char = btnInner - btnInner_text - btnInner_click;
					var saveBtn = fiveMap + fiveTextOut - botLoog - btnHeight + fiveMap_top * 2 - btninner_char;

					//					console.log(saveBtn)
					//					第五页一站剁齐按钮
					$('.pageFive .savebtn').css('top', saveBtn);

					//				第四页
					//					var fourInner = $('.pageFour .inner').height();
					//					var wh = $(window).height();
					//					var fourChar = wh - fourInner;

					if(winH < 667) {
						$('.allAcontainer .pageOne .wrapper').addClass('small');
						//					第五页 控制小屏展示
						$('.allAcontainer .pageFive').addClass('small');
						$('.pageFive .totalMap').css({
							'top': 'initial',
							'bottom': fiveMap - winH
						});
						//						第五页一站剁齐按钮
						$('.pageFive .savebtn').css({
							'top': 'initial',
							'bottom': 55
						});
						//						$('.pageFive .savebtn').css('top', saveBtn);
						$('.pageFive.small div.detailText').css('top', charH / 2);
						//	第四页 控制小屏展示
						$('.allAcontainer .pageFour .inner').addClass('small');
						//						第三页 小屏地图上移
						$('.allAcontainer .pageThree img.smallMap').addClass('small');
						$('.allAcontainer .pageThree img.mapImg').addClass('small');
						$('.allAcontainer .pageThree .swiper-container .mapImg').addClass('small');
						//						$('.allAcontainer .pageThree .fiveBtn').addClass('small');
						$('.allAcontainer .pageThree nav').addClass('small');
					}
					if(winH < 590) {
						$('.allAcontainer .pageThree nav').addClass('xsmall');
					}
					if(winH < 568) {
						$('.pageFive.small div.detailText').css('top', '10px');
						//						$('.allAcontainer .pageThree nav').css('top','36%')

					}
					//					判断7p
					var winw = $(window).width();

					if(winw == 414 && winH < 736) {

						$('.allAcontainer').addClass('phone7');
						var fiveMap_top = parseInt($('.phone7 .pageFive .totalMap').css('top'));
						var saveBtn = fiveMap + fiveTextOut - botLoog - btnHeight + fiveMap_top * 2 - btninner_char;
						//					//	第五页一站剁齐按钮
						$('.pageFive .savebtn').css('top', saveBtn);
					}
				})
			</script>
			<!--第五页-->
			<script type="text/javascript">
				$(function() {
					//				给地图上的点循环添加num 和country
					$('.pageFive  div.pointList span').each(function(index, item) {
						$(item).attr('num', index + 1);
						$(item).attr('class', 'country' + index);
					});
				})
			</script>

			<script type="text/javascript">
				//  背景音乐

				//          苹果浏览器  音乐图标暂停

				if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
					$(".music").removeClass("audio-rotate");
					$(".music").find("img").attr("src", "img/music_close.png");
					//        苹果  内置qq
					if(navigator.userAgent.indexOf('UIWebView Device') > -1) {
						$(".music").addClass("audio-rotate");
						$(".music").find("img").attr("src", "img/music_open.png")

					}
				}

				//          微信端  音乐图标开启
				if(/MicroMessenger/i.test(navigator.userAgent)) {
					$(".music").addClass("audio-rotate");
					$(".music").find("img").attr("src", "img/music_open.png")
				}
				var x = document.getElementById("audio");
				$(".music").click(function() {
					//控制背景音乐 播放或暂停
					if($(this).hasClass("audio-rotate")) {
						$(this).removeClass('audio-rotate');
						$(this).find("img").attr("src", "img/music_close.png")
						x.pause();
					} else {
						$(this).find("img").attr("src", "img/music_open.png")
						$(this).addClass('audio-rotate');
						x.play();

					}

				});
			</script>
	</body>

</html>